Wechat Mini | Note-9

发表于

微信小程序开发 Note-9

关注接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// Service
@Service
public class UserServiceImpl implements UserService {

	@Autowired
	private UsersMapper userMapper;
	@Autowired
	private UsersLikeVideosMapper usersLikeVideosMapper;
	@Autowired
	private UsersFansMapper usersFansMapper;
	@Autowired
	private Sid sid;
    
	@Transactional(propagation = Propagation.REQUIRED)
	@Override
	public void saveUserFanRelation(String userId, String fanId) {
		UsersFans usersFan = new UsersFans();
		usersFan.setId(sid.nextShort());
		usersFan.setUserId(userId);
		usersFan.setFanId(fanId);
		usersFansMapper.insert(usersFan);

		userMapper.addFansCount(userId);
		userMapper.addFollersCount(fanId);
	}

	@Transactional(propagation = Propagation.REQUIRED)
	@Override
	public void deleteUserFanRelation(String userId, String fanId) {
		Example example = new Example(UsersFans.class);
		Example.Criteria criteria = example.createCriteria();
		criteria.andEqualTo("userId",userId);
		criteria.andEqualTo("fanId",fanId);
		usersFansMapper.deleteByExample(example);

		userMapper.reduceFansCount(userId);
		userMapper.reduceFollersCount(fanId);
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// Controller
@RestController
@Api(value = "USER FUNCTION API", tags = {"USER FUNCTION CONTROLLER"})
@RequestMapping("/user")
public class UserController extends BasicController {

	@Autowired
	private UserService userService;

	@ApiOperation(value = "FOLLOW USER", notes = "FOLLOW USER API")
	@PostMapping("/beyourfans")
	public IMoocJSONResult beyourfans(String userId,String fanId) {
		if (StringUtils.isBlank(userId) || StringUtils.isBlank(fanId)) {
			return IMoocJSONResult.errorMsg("信息不存在(无ID)");
		}
		userService.saveUserFanRelation(userId,fanId);
		return IMoocJSONResult.ok("关注成功");
	}

	@ApiOperation(value = "UNFOLLOW USER", notes = "UNFOLLOW USER API")
	@PostMapping("/dontbeyourfans")
	public IMoocJSONResult dontbeyourfans(String userId,String fanId) {
		if (StringUtils.isBlank(userId) || StringUtils.isBlank(fanId)) {
			return IMoocJSONResult.errorMsg("信息不存在(无ID)");
		}
		userService.deleteUserFanRelation(userId,fanId);
		return IMoocJSONResult.ok("取消关注成功");
	}
}

关注联调

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// mine.js
Page({
  data: {
    isMe:true,
    isFollow:false,
    publisherId:""
  },
  // 加载
  onLoad: function(params) {
    var me = this;

    // var user = app.userInfo;
    // 修改原有的全局对象为本地缓存
    var user = app.getGlobalUserInfo();
    var userId = user.id;

    var publisherId = params.publisherId;
    if (publisherId != null && publisherId != "" && publisherId != undefined){
      // 进入发布者的页面
      userId = publisherId;
      me.setData({
        isMe:false,
        publisherId: publisherId
      });
    }
      ...
    });
  }
  // 关注事件
  followMe:function(e){
    var me = this;
    var publisherId = me.data.publisherId;
    var user = app.getGlobalUserInfo();
    var userId = user.id;

    var followType = e.currentTarget.dataset.followtype;
    var url = '';
    if(followType == '1'){
      // 关注
      url = '/user/beyourfans?userId=' + publisherId + "&fanId=" + userId;
    }else{
      // 取消关注
      url = '/user/dontbeyourfans?userId=' + publisherId + "&fanId=" + userId;
    }

    wx.showLoading({
      title: '提交中',
    });

    wx.request({
      url: app.serverUrl + url,
      method:'POST',
      header: {
        'content-type': 'application/json',
        'userId': user.id,
        'userToken': user.userToken
      },
      success:function(){
        wx.hideLoading();
        if (followType == '1') {
          // 关注
          me.setData({
            isFollow:true
          });
        } else {
          // 取消关注
          me.setData({
            isFollow: false
          });
        }
      }
    })
  }
})

关注功能完善

关注与已关注的实时刷新；

1
2
3
4
5
6
7
8
9
10
11
12
13
if (followType == '1') {
    // 关注
    me.setData({
        isFollow:true,
        fansCounts: ++me.data.fansCounts
    });
} else {
    // 取消关注
    me.setData({
        isFollow: false,
        fansCounts: --me.data.fansCounts
    });
}

用户头像的事件触发修改；

1
2
3
4
5
6
7
8
<block wx:if="{{isMe}}">
    <image src="{{faceUrl}}" class="face" bindtap='changeFace'></image>
</block>

<block wx:if="{{!isMe}}">
    <image src="{{faceUrl}}" class="face"></image>
</block>
<label class='nickname'>{{nickname}}</label>

作品 收藏 关注 tab动态切换

通过三个不同的List和不同的Flag的值，进行不同List的获取；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
const app = getApp()
Page({
  data: {
    faceUrl: "../resource/images/noneface.png",
    isMe: true,
    isFollow: false,
    publisherId: "",

    videoSelClass: "video-info",
    isSelectedWork: "video-info-selected",
    isSelectedLike: "",
    isSelectedFollow: "",

    myVideoList: [],
    myVideoPage: 1,
    myVideoTotal: 1,

    likeVideoList: [],
    likeVideoPage: 1,
    likeVideoTotal: 1,

    followVideoList: [],
    followVideoPage: 1,
    followVideoTotal: 1,

    myWorkFlag: false,
    myLikesFlag: true,
    myFollowFlag: true
  }
  // 选择作品tab
  doSelectWork: function() {
    this.setData({
      isSelectedWork: "video-info-selected",
      isSelectedLike: "",
      isSelectedFollow: "",

      myWorkFlag: false,
      myLikesFlag: true,
      myFollowFlag: true,

      myVideoList: [],
      myVideoPage: 1,
      myVideoTotal: 1,

      likeVideoList: [],
      likeVideoPage: 1,
      likeVideoTotal: 1,

      followVideoList: [],
      followVideoPage: 1,
      followVideoTotal: 1
    });

    this.getMyVideoList(1);
  },
  // 选择收藏tab
  doSelectLike: function() {
  },
  // 选择关注tab
  doSelectFollow: function() { 
  },
  getMyVideoList: function(page) {
    var me = this;

    // 查询视频信息
    wx.showLoading();
    // 调用后端
    var serverUrl = app.serverUrl;
    wx.request({
      url: serverUrl + '/video/showAll/?page=' + page + '&pageSize=6',
      method: "POST",
      data: {
        userId: me.data.userId
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function(res) {
        console.log(res.data);
        var myVideoList = res.data.data.rows;
        wx.hideLoading();

        var newVideoList = me.data.myVideoList;
        me.setData({
          myVideoPage: page,
          myVideoList: newVideoList.concat(myVideoList),
          myVideoTotal: res.data.data.total,
          serverUrl: app.serverUrl
        });
      }
    })
  },
  // 我的作品视频列表
  getMyVideoList: function(page) {
    var me = this;

    // 查询视频信息
    wx.showLoading();
    // 调用后端
    var serverUrl = app.serverUrl;
    wx.request({
      url: serverUrl + '/video/showAll/?page=' + page + '&pageSize=6',
      method: "POST",
      data: {
        userId: me.data.userId
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function(res) {
        console.log(res.data);
        var myVideoList = res.data.data.rows;
        wx.hideLoading();

        var newVideoList = me.data.myVideoList;
        me.setData({
          myVideoPage: page,
          myVideoList: newVideoList.concat(myVideoList),
          myVideoTotal: res.data.data.total,
          serverUrl: app.serverUrl
        });
      }
    })
  }
})

微信API菜单操作

wx.showActionSheet(OBJECT) 显示操作菜单

OBJECT参数说明：

参数 类型 必填 说明
itemList String Array 是 按钮的文字数组，数组长度最大为6个
itemColor HexColor 否 按钮的文字颜色，默认为”#000000”
success Function 否 接口调用成功的回调函数，详见返回参数说明
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行） 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
shareMe:function(){
    wx.showActionSheet({
        itemList: ['下载到本地', '举报用户', '分享到朋友圈','分享到QQ空间','分享到微博'],
        success: function (res) {
            console.log(res.tapIndex);
            if(res.tapIndex == 0){
                // 下载
            }else if(res.tapIndex == 1){
                // 举报用户
            }else{
                // 未开放
                wx.showToast({
                    title: '功能暂未开发',
                    icon:'loading'
                })
            }
        }
    })
}

保存举报信息接口

1
2
3
4
5
6
7
8
//Service
@Transactional(propagation = Propagation.REQUIRED)
@Override
public void reportUser(UsersReport usersReport) {
    usersReport.setId(sid.nextShort());
    usersReport.setCreateDate(new Date());
    usersReportMapper.insert(usersReport);
}
1
2
3
4
5
6
7
8
// Controller
@ApiOperation(value = "REPORT USER", notes = "REPORT USER API")
@PostMapping("/reportUser")
public IMoocJSONResult reportUser(@RequestBody UsersReport usersReport) {
    // 保存举报信息
    userService.reportUser(usersReport);
    return IMoocJSONResult.errorMsg("举报成功，相关人员会及时处理");
}

举报联调

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
else if (res.tapIndex == 1) {
    // 举报用户
    var videoInfo = JSON.stringify(me.data.videoInfo);
    var realUrl = '../videoinfo/videoinfo#videoInfo@' + videoInfo;
    if (user == null || user == undefined || user == '') {
        wx.navigateTo({
            url: '../userLogin/login?redirectUrl=' + realUrl,
        });
    } else {
        var publishUserId = me.data.videoInfo.userId;
        var videoId = me.data.videoInfo.id;
        wx.navigateTo({
            url: '../report/report?videoId=' + videoId + "&publishUserId=" + publishUserId
        });
    }
}

分享好友或微信群

onShareAppMessage(Object)

监听用户点击页面内转发按钮（<button> 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。

注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮

Object 参数说明：

参数 类型 说明
from String 转发事件来源。 button：页面内转发按钮； menu：右上角转发菜单
target Object 如果 from 值是 button，则 target 是触发这次转发事件的 button，否则为 undefined
webViewUrl String 页面中包含<web-view>组件时，返回当前<web-view>的url 
1
2
3
4
5
6
7
8
9
10
// 分享
onShareAppMessage: function(res) {
    var me = this;
    var videoInfo = me.data.videoInfo;

    return {
        title: '短视频内容分享',
        path: 'pages/videoinfo/videoinfo?videoInfo=' + JSON.stringify(videoInfo)
    }
}

下载视频到本地

wx.downloadFile(OBJECT)

下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径；

OBJECT参数说明：

参数 类型 必填 必填
url String 是 下载资源的 url
header Object 否 HTTP 请求 Header，header 中不能设置 Referer
success Function 否 下载成功后以 tempFilePath 的形式传给页面，res = {tempFilePath: ‘文件的临时路径’}
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

注：文件的临时路径，在小程序本次启动期间可以正常使用，如需持久保存，需在主动调用 wx.saveFile，才能在小程序下次启动时访问得到；

注：请在 header 中指定合理的 Content-Type 字段，以保证客户端正确处理文件类型；

wx.saveVideoToPhotosAlbum(OBJECT)

保存视频到系统相册

需要用户授权 scope.writePhotosAlbum

OBJECT参数说明：

参数名 类型 必填 说明
filePath String 是 视频文件路径，可以是临时文件路径也可以是永久文件路径
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行） 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
if (res.tapIndex == 0) {
    // 下载
    wx.showLoading({
        title: '下载中',
    });
    wx.downloadFile({
        url: app.serverUrl + me.data.videoInfo.videoPath,
        success: function(res) {
            // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
            if (res.statusCode === 200) {
                wx.saveVideoToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success:function(res) {
                        console.log(res.errMsg)
                        wx.hideLoading();
                    }
                });
            }
        }
    });
}